import React, { Component } from 'react';
import Swiper from '../../../components/Swiper'
import { getHomeBanner, getTabs} from '../../../api'
import TabSel from '../../../components/TabSel'
import ListItem from '../../../components/ListItem'
class Index extends Component {
	state = {
		banners: [],
		tabs: [],
		activeTabIndex: 0
	}
	async getHomeBanner() {
		const resp = await getHomeBanner()
		this.setState({
			banners: resp.data.message
		})
	}
	async getTabs() {
		const resp = await getTabs()
		this.setState({
			tabs: resp.data.data
		})
	}
	handleClickTab = (i) => {
		this.setState({
			activeTabIndex: i
		})
	}
	componentDidMount() {
		this.getHomeBanner()
		this.getTabs()
	}
	render() {
		const { banners, tabs, activeTabIndex } = this.state

		console.log(tabs);
		return (
			<div>
				<div>
					头部
				</div>
				<div>
					<TabSel tabs={ tabs } activeTabIndex={ activeTabIndex } handleClickTab={ this.handleClickTab }></TabSel>
				</div>
				<div>
					<Swiper banners={banners}></Swiper>
				</div>
				<div>
					{
						tabs.length > 0 && tabs[activeTabIndex].children.map(v => {
							return <ListItem { ...v } key={v.id} 
								onClick={ () => this.props.history.push({
									pathname: '/detail',
									state: v
								}) }
							></ListItem>
						})
					}
				</div>

			</div>
		);
	}
}

export default Index;
